<template>
  <div class="acctive">
    <el-row>
      <el-button class="xinzeng" @click="$router.push('/home/addindex')"
        >新增</el-button
      >
    </el-row>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="版本号" prop="versionId" width="180">
      </el-table-column>
      <el-table-column label="版本名" prop="versionName" width="180">
      </el-table-column>
      <el-table-column label="应用大小(G)" prop="fileSize"> </el-table-column>
      <el-table-column label="是否强制更新" prop="status">
        <template v-slot="{ row }">
          {{ formlist(row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="发布日期" prop="publicTime">
        <template v-slot="{ row }">
          {{ formdata(row.publicTime) }}
        </template>
      </el-table-column>
      <el-table-column label="更新内容" prop="content"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-link :href="srcurl" :underline="false">
          <el-button type="text" @click="hsubmict(row)">下载</el-button>
          </el-link>
          <el-button type="text" @click="hsubdelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="lyx"
      :current-page.sync="q.page"
      :page-size="2"
      :page-sizes="[10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { userversions, userversionsdelete } from "@/api/user";
import dayjs from "dayjs";
import employeesConst from "@/constant/employees";
const hireTypelist = {};
employeesConst.hirealist.forEach((item) => {
  hireTypelist[item.status] = item.value;
});

export default {
  data() {
    return {
      srcurl:'',
      total: 0,
      list: [],
      q: {
        page: 1,
        size: 10,
      },
    };
  },
  created() {
    this.loaversions();
  },
  methods: {
    async loaversions() {
      const res = await userversions(this.q);
      console.log(res);
      this.total = res.count-0;
      this.list = res.data;
    },
    // 格式化时间
    formdata(data) {
      return dayjs(data).format("YYYY-MM-DD");
    },
    // 格式化是否强制更新
    formlist(code) {
      return hireTypelist[code];
    },
    // 下载
    hsubmict(row){
      this.srcurl = row.url
    },
    // 删除
    hsubdelete(id) {
      this.$confirm("你确定要删除吗？","提示",{
        type:'warning'
      })
        .then(() => {
          this.doDel(id);
        })
        .catch(() => {});
    },
    async doDel(id) {
      try {
        const res = await userversionsdelete(id);
        this.loaversions();
        this.$message.success(res.msg);
      } catch (e) {
        this.$message.error(e.msg);
      }
    },
    // 分页
    handleCurrentChange(page) {
      this.q.page = page;
      this.loaversions();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loaversions();
    },
  },
};
</script>

<style scoped>
.acctive {
  background-color: #fff;
  padding-left: 30px;
}
.xinzeng {
    background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
    border: 1px solid #ff7144;
  margin: 30px 0 30px 0;
  color: #fff;
}
.el-button--text{
  padding-left: 10px;
}
</style>
